import React, { useState, useEffect } from 'react'

import { useLocation } from 'react-router-dom'

import { paper, qqq } from '../axiosAPI/lzx'

import { UserOutlined } from '@ant-design/icons'

import { useNavigate } from 'react-router-dom'

import axios from "axios";
axios.defaults.baseURL = "http://localhost:3001";

export default function Lzx_questions() {
    const navigate = useNavigate()

    const location = useLocation()
    const [questions, setquestions] = useState('')

    const { item } = location.state

    const [list, setList] = useState(item)

    const [total, setTotal] = useState({
        '1': 0,
        '2': 0,
        '3': 0,
    })
    const [jian, setJian] = useState(0)
    const [sum, setSum] = useState(0)

    const jisuan = (v) => {
        const arr = Object.entries(v)
        let key = arr[0][0]
        let newVal = total[key] + arr[0][1]
        setTotal({ ...total, [arr[0][0]]: newVal })
    }

    const [data, setData] = useState([])
    const [qlist, setQlist] = useState([])

    useEffect(() => {
        getData()
        getQqq()
    }, [])
    const getData = async () => {
        const { data: { code, data } } = await paper({})
        if (code === 200) {
            setData(data)
            data.forEach(ele => {
                if (ele._id === item.paper._id && ele.type === false) {
                    let arr = Object.keys(item.result);
                    const keysArray = Object.values(arr)
                    setquestions(keysArray)
                }
            })
        }
    }

    const getQqq = async () => {
        const { data: { code, data } } = await qqq({})
        if (code === 200) {
            setQlist(data)
        }
    }

    const he = () => {
        let sum = 0
        Object.entries(total).forEach(item => {
            sum += item[1]
        })
        sum += Number(jian)
        setSum(sum)
    }
    const Save = async () => {
        let update = { ...list, status: true }
        update['grade'] = sum

        const { data: { code } } = await axios.put('/lzx/editResult', { update })
        if (code === 200) {
            navigate(-1)
        }
    }

    return (
        <div id='questions'>
            <div className='left'>
                <div className='box'>
                    <div className='img' style={{ position: 'relative' }}>
                        <UserOutlined style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', fontSize: '30px' }} />
                    </div>
                    <div className='name'>
                        <p>学号：{item.student.tid}</p>
                        <p>姓名：{item.student.name}</p>
                        <p>班级：{item.clazz}</p>
                    </div>
                </div>
            </div>
            <div className='zhong'>
                {
                    data.filter(e => e._id === item.paper._id).map(ele => {
                        return <div className='question' key={ele._id}>
                            <div className='ooo'>
                                <h1 style={{ textAlign: 'center', marginTop: '20px' }}>{ele.name}</h1>
                                <div className='oo' style={{ margin: '20px auto', width: '80%', height: '100px', border: '1px solid #f0f0f0', overflow: 'auto' }}>
                                    <div className='one'>
                                        <div className='shang'><p>单选题</p></div>
                                        <div className='xia'>{total[1]}</div>
                                    </div>
                                    <div className='one'>
                                        <div className='shang'><p>多选题</p></div>
                                        <div className='xia'>{total[2]}</div>
                                    </div>
                                    <div className='one'>
                                        <div className='shang'><p>判断题</p></div>
                                        <div className='xia'>{total[3]}</div>
                                    </div>
                                    <div className='one'>
                                        <div className='shang'><p>简答题</p></div>
                                        <div className='xia'>{jian}</div>
                                    </div>
                                    <div className='one'>
                                        <div className='shang'><p>总分</p></div>
                                        <div className='xia'>{sum}</div>
                                    </div>
                                </div>
                            </div>
                            {!ele.type ?
                                qlist.filter(obj => questions.includes(obj._id)).map((ques, index) => {
                                    return (
                                        <div className='item' key={ques._id} style={{ margin: '40px 10px' }}>
                                            <h3>.{ques.cate === 1 ? '单选题' : ques.cate === 2 ? '多选题' : ques.cate === 3 ? '判断题' : '简答题'}({ele.out / questions.length}分)</h3>
                                            <p style={{ marginTop: '10px', marginLeft: '30px' }}>{index + 1}.{ques.title}</p>
                                            {
                                                ques.options && ques.options.length > 1 ?
                                                    <div style={{ marginLeft: '30px' }}>
                                                        {
                                                            ques.options.map((option, index2) => (
                                                                <div className='option' key={option._id}>
                                                                    <p
                                                                        className={
                                                                            Object.values(item.result).some(value =>
                                                                                Array.isArray(value) ? value.includes(option._id) : value === option._id) ? 'option-title' : ''
                                                                        }
                                                                        style={{
                                                                            padding: '5px',
                                                                            backgroundColor: option.isRight ? '#ECF5FF' : '',
                                                                            marginTop: '5px',
                                                                            width: '80%',
                                                                            border: option.isRight ? '1px solid #409EFF' : '1px solid #f0f0f0',
                                                                        }}>
                                                                        {option.title}
                                                                    </p>
                                                                </div>
                                                            ))
                                                        }

                                                        <div style={{ marginTop: '10px', display: 'flex', gap: '10px' }}>
                                                            <button onClick={() => jisuan({ [ques.cate]: ele.out / questions.length })}>正确</button>
                                                            <button onClick={() => jisuan({ [ques.cate]: 0 })}>错误</button>
                                                        </div>
                                                    </div>
                                                    :
                                                    <div style={{ marginTop: '10px', marginLeft: '30px', fontSize: '14px' }}>
                                                        <div style={{ display: 'flex', gap: '10px' }}>
                                                            <p style={{ color: '#409EFF' }}>本题等分：</p>
                                                            <input type='text' name='score' value={jian} onChange={(e) => setJian(e.target.value)}
                                                                style={{ width: '100px', height: '20px', border: '2px solid red' }} />
                                                        </div>
                                                        <div style={{ width: '80%', marginTop: '15px', display: 'flex', alignItems: 'center' }}>
                                                            <div style={{ width: '15%' }}>考试答案：</div>
                                                            <div style={{ width: '75%', marginTop: '5px' }}>{item.result["66d02033e55fdecbd5b40166"]}</div>
                                                        </div>
                                                        <div style={{ width: '80%', marginTop: '10px', display: 'flex', alignItems: 'center' }}>
                                                            <div style={{ width: '15%' }}>参考答案：</div>
                                                            <div style={{ width: '75%', marginTop: '5px' }}>{ques.answer}</div>
                                                        </div>
                                                    </div>
                                            }
                                        </div>
                                    )
                                })
                                :
                                <>{ele.questions.map((ques, index) => {

                                    return (
                                        <div className='item' key={ques._id} style={{ margin: '40px 10px' }}>
                                            <h3>.{ques.cate === 1 ? '单选题' : ques.cate === 2 ? '多选题' : ques.cate === 3 ? '判断题' : '简答题'}({ele.out / ques.length}分)</h3>
                                            <p style={{ marginTop: '10px', marginLeft: '30px' }}>{index + 1}.{ques.title}</p>
                                            {
                                                ques.options && ques.options.length > 1 ?
                                                    <div style={{ marginLeft: '30px' }}>
                                                        {
                                                            ques.options.map((option, index2) => (
                                                                <div className='option' key={option._id}>
                                                                    <p
                                                                        className={
                                                                            Object.values(item.result).some(value =>
                                                                                Array.isArray(value) ? value.includes(option._id) : value === option._id) ? 'option-title' : ''
                                                                        }
                                                                        style={{
                                                                            padding: '5px',
                                                                            backgroundColor: option.isRight ? '#ECF5FF' : '',
                                                                            marginTop: '5px',
                                                                            width: '80%',
                                                                            border: option.isRight ? '1px solid #409EFF' : '1px solid #f0f0f0',
                                                                        }}>
                                                                        {option.title}
                                                                    </p>
                                                                </div>
                                                            ))
                                                        }

                                                        <div style={{ marginTop: '10px', display: 'flex', gap: '10px' }}>
                                                            <button onClick={() => jisuan({ [ques.cate]: ele.out / ques.length })}>正确</button>
                                                            <button onClick={() => jisuan({ [ques.cate]: 0 })}>错误</button>
                                                        </div>
                                                    </div>
                                                    :
                                                    <div style={{ marginTop: '10px', marginLeft: '30px', fontSize: '14px' }}>
                                                        <div style={{ display: 'flex', gap: '10px' }}>
                                                            <p style={{ color: '#409EFF' }}>本题等分：</p>
                                                            <input type='text' name='score' value={jian} onChange={(e) => setJian(e.target.value)}
                                                                style={{ width: '100px', height: '20px', border: '2px solid red' }} />
                                                        </div>
                                                        <div style={{ width: '80%', marginTop: '15px', display: 'flex', alignItems: 'center' }}>
                                                            <div style={{ width: '15%' }}>考试答案：</div>
                                                            <div style={{ width: '75%', marginTop: '5px' }}>{item.result["66d02033e55fdecbd5b40166"]}</div>
                                                        </div>
                                                        <div style={{ width: '80%', marginTop: '10px', display: 'flex', alignItems: 'center' }}>
                                                            <div style={{ width: '15%' }}>参考答案：</div>
                                                            <div style={{ width: '75%', marginTop: '5px' }}>{ques.answer}</div>
                                                        </div>
                                                    </div>
                                            }
                                        </div>
                                    )
                                })}</>
                            }
                        </div>


                    })
                }
                <div className='total' style={{ width: '95%', height: '100px', marginTop: '50px', textAlign: 'center', borderTop: '1px solid #bbb', padding: '20px' }}>
                    <button
                        onClick={he}
                        style={{ padding: '10px 100px', background: '#409EFF', color: '#fff', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
                    >确定</button>
                </div>
            </div >
            <div className='right'>
                {
                    data.filter(e => e._id === item.paper._id).map(ele => {
                        return <div className='score' key={ele._id}>
                            {!ele.type ?
                                qlist.filter(obj => questions.includes(obj._id)).map((ques, index) => (
                                    <div className='item' key={ques._id} style={{ margin: '20px 10px' }}>
                                        <h3>.{ques.cate === 1 ? '单选题' : ques.cate === 2 ? '多选题' : ques.cate === 3 ? '判断题' : '简答题'}({ele.out / questions.length}分)</h3>
                                        <div
                                            style={{
                                                width: '50px',
                                                height: '50px',
                                                border: '0.5px solid #95F204',
                                                color: '#95F204',
                                                margin: '5px',
                                                textAlign: 'center',
                                                lineHeight: '50px',
                                                borderRadius: '5px'
                                            }}>
                                            <p>1</p>
                                        </div>
                                    </div>
                                ))
                                : ele.questions.map((ques, index) => (
                                    <div className='item' key={ques._id} style={{ margin: '20px 10px' }}>
                                        <h3>.{ques.cate === 1 ? '单选题' : ques.cate === 2 ? '多选题' : ques.cate === 3 ? '判断题' : '简答题'}({ele.out/ques.length}分)</h3>
                                        <div
                                            style={{
                                                width: '50px',
                                                height: '50px',
                                                border: '0.5px solid #95F204',
                                                color: '#95F204',
                                                margin: '5px',
                                                textAlign: 'center',
                                                lineHeight: '50px',
                                                borderRadius: '5px'
                                            }}>
                                            <p>1</p>
                                        </div>
                                    </div>
                                ))
                            }
                        </div>


                    })
                }
                <div className='score' style={{ width: '87%', height: '100px', marginTop: '50px', textAlign: 'center', borderTop: '1px solid #bbb', padding: '20px' }}>
                    <button
                        onClick={Save}
                        style={{ padding: '8px 30px', background: '#67C23A', color: '#fff', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
                    >保存</button>
                    &nbsp;&nbsp;
                    <button
                        onClick={() => navigate(-1)}
                        style={{ padding: '8px 30px', background: '#409EFF', color: '#fff', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
                    >返回</button>
                </div>
            </div>
        </div >
    )
}